<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>仪表盘</title>
    <style>
        hr {
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .h2 {
            margin-bottom: 5px;
        }

        .h4 {
            margin-bottom: 2px;
        }
    </style>
</head>
<body>
<div class="content-wrapper">
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">江苏省地税渠道分析综合指标</div>
                <div class="panel-body">
                    <div id="echarts-map" style="height: 490px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="panel panel-primary" style="height: 562px;">
                <div class="panel-heading">12366热词</div>
                <div class="panel-body" id="12366rc">
                    <div class="note note-success">
                        <h4 class="block">营改增</h4>
                        <p>在最近1天内出现了2060次</p>
                    </div>
                    <div class="note note-info">
                        <h4 class="block">创客</h4>
                        <p>在最近1小时内出现了10次</p>
                    </div>
                    <div class="note note-danger">
                        <h4 class="block">自贸区</h4>
                        <p>在最近1天内出现了20次</p>
                    </div>
                    <div class="note note-warning">
                        <h4 class="block">收入分配改革</h4>
                        <p>在最近1小时内出现了20次</p>
                    </div>
                    <div class="note note-success">
                        <h4 class="block">全面二胎</h4>
                        <p>在最近1天内出现了80次</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="panel widget row" style="cursor: pointer;" onclick="to_qd_detail(1);">
                <div class="row row-table">
                    <div class="row row-table bg-primary">
                        <div class="col-xs-3 text-center bg-primary-dark  pv-lg">
                            <em class="icon-call-in fa-3x"></em>
                        </div>
                        <div class="col-xs-9 pv-lg">
                            <div class="h2 mt0">86%</div>
                            <div class="text-uppercase">12366当日接通率</div>
                            <hr/>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="h4 mt0">76%
                                    </div>
                                    <div style="font-size: 10px;">坐席负载</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="h4 mt0">3分钟
                                    </div>
                                    <div style="font-size: 10px;">平均等待时长</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="panel widget row" style="cursor: pointer;" onclick="to_qd_detail(2);">
                <div class="row row-table">
                    <div class="row row-table bg-green">
                        <div class="col-xs-3 text-center bg-green-dark  pv-lg">
                            <em class="icon-emoticon-smile fa-3x"></em>
                        </div>
                        <div class="col-xs-9 pv-lg">
                            <div class="h2 mt0">92%</div>
                            <div class="text-uppercase">实体办税厅窗口满意率</div>
                            <hr/>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="h4 mt0">5人
                                    </div>
                                    <div style="font-size: 10px;">排队人数</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="h4 mt0">3分钟
                                    </div>
                                    <div style="font-size: 10px;">平均等待时长</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel widget row" style="cursor: pointer;" onclick="to_qd_detail(3);">
                <div class="row row-table">
                    <div class="row row-table bg-purple">
                        <div class="col-xs-3 text-center bg-purple-dark pv-lg">
                            <em class="icon-globe fa-3x"></em>
                        </div>
                        <div class="col-xs-9 pv-lg">
                            <div class="h2 mt0">正常
                            </div>
                            <div class="text-uppercase">网上办税厅当前状态</div>
                            <hr/>
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="h4 mt0">1686人
                                    </div>
                                    <div style="font-size: 10px;">登陆人数</div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="h4 mt0">30分钟
                                    </div>
                                    <div style="font-size: 10px;">本日平均在线时间</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>


<script type="text/javascript">
    $(function () {
        setInterval(function () {
            alert('aaaaa');
            var float_el = $('#12366rc').find('div.note').first();
            float_el.hide('slow',function(){
                $('#12366rc').append(float_el);
                float_el.show('slow', function () {
                })
            });

            $.notify("Hello World");
        }, 2000);
    })

    function to_qd_detail(v) {
        if (v == 1) {
            window.location = '${ctx}/telStatus/report';
        }
        if (v == 2) {
            window.location = '${ctx}/offlineStatus/report';
        }
        if (v == 3) {
            window.location = '${ctx}/webStatus/report';
        }
    }


    require.config({
        paths: {
            echarts: '${ctx}/assets/echarts/build/dist'
        }
    });
    var cityMap = {
        "南京市": "320100",
        "无锡市": "320200",
        "徐州市": "320300",
        "常州市": "320400",
        "苏州市": "320500",
        "南通市": "320600",
        "连云港市": "320700",
        "淮安市": "320800",
        "盐城市": "320900",
        "扬州市": "321000",
        "镇江市": "321100",
        "泰州市": "321200",
        "宿迁市": "321300"
    };

    require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/scatter',
                'echarts/chart/pie',
                'echarts/chart/map',
                'echarts/chart/tree',
                'echarts/chart/funnel',
                'echarts/chart/wordCloud'

            ],
            function (ec) {
                var curIndx = 0;
                var mapType = [];
                var mapGeoData = require('echarts/util/mapData/params');
                for (var city in cityMap) {
                    mapType.push(city);
                    // 自定义扩展图表类型
                    mapGeoData.params[city] = {
                        getGeoJson: (function (c) {
                            var geoJsonName = cityMap[c];
                            return function (callback) {
                                $.getJSON('${ctx}/assets/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
                            }
                        })(city)
                    }
                }
                //江苏省税务业务办理事项统计
                var myChart = ec.init(document.getElementById('echarts-map'));
                var mapOption = {
                    color: ['gold', 'aqua', 'lime'],
                    tooltip: {
                        trigger: 'item',
                        formatter: function (v) {
                            if (v[2] == 9999) {
                                return v[1] + ':12366坐席接通率低于60%；请注意！';
                            }
                            return '';

                        }
                    },
                    dataRange: {
                        min: 0,
                        calculable: true,
                        max: 10000,
                        color: ['orangered', 'yellow', 'lightskyblue'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            type: 'map',
                            roam: true,
                            mapType: '江苏',
                            selectedMode: 'single',
                            itemStyle: {
                                normal: {label: {show: true}},
                                emphasis: {label: {show: true}}
                            },
                            data: [
                                {name: '南京市', value: 7000},
                                {name: '镇江市', value: 1670},
                                {name: '常州市', value: 2102},
                                {name: '无锡市', value: 5000},
                                {name: '苏州市', value: 7000},
                                {name: '南通市', value: 1600},
                                {name: '泰州市', value: 1300},
                                {name: '扬州市', value: 5000},
                                {name: '盐城市', value: 2102},
                                {name: '淮安市', value: 1100},
                                {name: '宿迁市', value: 2300},
                                {name: '徐州市', value: 4000},
                                {name: '连云港市', value: 3000}
                            ],
                            markPoint: {
                                symbol: 'emptyCircle',
                                symbolSize: function (v) {
                                    return 10 + v / 1000
                                },
                                effect: {
                                    show: true,
                                    shadowBlur: 0
                                },
                                itemStyle: {
                                    normal: {
                                        label: {show: false}
                                    },
                                    emphasis: {
                                        label: {position: 'top'}
                                    }
                                },
                                data: [
                                    {name: '南京市', value: 9999},
                                    {name: '苏州市', value: 9999}
                                ]
                            },
                            geoCoord: {
                                '南京市': [118.8062, 31.9208],
                                '镇江市': [119.4763, 31.9702],
                                '常州市': [119.4543, 31.5582],
                                '无锡市': [120.3442, 31.5527],
                                '苏州市': [120.6519, 31.3989],
                                '南通市': [121.1023, 32.1625],
                                '泰州市': [120.0586, 32.5525],
                                '扬州市': [119.4653, 32.8162],
                                '盐城市': [120.2234, 33.5577],
                                '淮安市': [118.927, 33.4039],
                                '宿迁市': [118.5535, 33.7775],
                                '徐州市': [117.5208, 34.3268],
                                '连云港市': [119.1248, 34.552]
                            }
                        }

                    ]
                };
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
                    var mt = "江苏";
                    if (mapOption.series[0].mapType == '江苏') {
                        var selected = param.selected;
                        for (var i in selected) {
                            if (selected[i]) {
                                mt = i;
                                break;
                            }
                        }
                        mapOption.series[0].mapType = mt;
                        mapOption.markPoint = {};
                        myChart.setOption(mapOption, true);
                    } else {
                        mapOption.series[0].mapType = "江苏";
                        mapOption.markPoint = {};
                        myChart.setOption(mapOption, true);
                    }

                });
                myChart.setOption(mapOption, true);
            })


</script>
</body>
</html>
